 <template>
      <el-card>
        <template #header>
        <div class="header-container">
          <div class="header-icon">
            <el-icon><Connection /></el-icon>
          </div>
          <div class="header-title">
            <div class="title-bg"></div>
            <span>{{t('networkConfig.iperf_testing_label')}}</span>
          </div>
        </div>
        </template>
        <div class="two-column-layout">
          <!-- 左侧服务端测试 -->
          <div class="test-column">
            <div class="column-header">
              <div class="header-line"></div>
              <span>服务端测试</span>
              <div class="header-line"></div>
            </div>
            <div class="column-content">
              <IperfComponents direction="server" />
            </div>
          </div>

          <!-- 右侧客户端测试 -->
          <div class="test-column">
            <div class="column-header">
              <div class="header-line"></div>
              <span>客户端测试</span>
              <div class="header-line"></div>
            </div>
            <div class="column-content">
              <IperfComponents direction="client" />
            </div>
          </div>
        </div>
      </el-card>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'IperfTest',
 })
 </script>
 <script setup  lang="ts">
 import { useI18n } from 'vue-i18n'
 import IperfComponents from './iperfComponents.vue'
 const { t } = useI18n()
 </script>
 
 <style lang="scss" scoped>
.header-container {
  display: flex;
  align-items: center;
  position: relative;
}

.header-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.2), rgba(0, 120, 215, 0.3));
  border-radius: 50%;
  margin-right: 15px;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.5);
  
  i {
    color: #00b4ff;
    font-size: 18px;
  }
}

.header-title {
  position: relative;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 180, 255, 0.8);
  z-index: 1;
  
  &:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(to right, #00b4ff, transparent);
  }
}

.two-column-layout {
  display: flex;
  width: 100%;
  gap: 20px;
}

.test-column {
  flex: 1;
  min-width: 0; // 防止flex子项溢出
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px rgba(0, 40, 80, 0.3);
  overflow: hidden;
}

.column-header {
  background: linear-gradient(to right, rgba(0, 60, 120, 0.4), rgba(0, 100, 180, 0.6), rgba(0, 60, 120, 0.4));
  padding: 12px 15px;
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  span {
    margin: 0 15px;
    text-shadow: 0 0 5px rgba(0, 200, 255, 0.8);
    z-index: 1;
  }
  
  .header-line {
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, rgba(0, 200, 255, 0.8), transparent);
  }
}

.column-content {
  flex: 1;
  overflow: hidden;
  background-color: rgba(0, 20, 50, 0.2);
}
 </style>
 